import AppProvider from "../../sources/AppProvider.ts";
import {useEffect} from "react";
import DGFadeView from "../../components/DGFadeView.tsx";
import DGListView from "../../components/DGListView.tsx";
import DGCardView from "../../components/DGCardView.tsx";
import DGTextView from "../../components/DGTextView.tsx";
import DGListViewItem from "../../components/DGListViewItem.tsx";
import DGFooterView from "../../components/DGFooterView/DGFooterView.tsx";
import {Box} from "@mui/material";
import {ArrowRight} from "@mui/icons-material";

const DGMoney = () => {

    const App = AppProvider.useAppContext();


    useEffect(() => {
        if (App) App.setTitle("我的钱包");
    }, [App]);

    return (<DGFadeView time={1000}>
        {/* 钱包余额 */}
        <DGCardView title="钱包余额" Margin="15px" ripple>
            <Box style={{padding: "20px 0"}}>
                <DGTextView variant='h4' Bold Padding>￥999.999.00</DGTextView>
            </Box>
        </DGCardView>
        {/* 钱包服务 */}
        <DGListView title="钱包服务" gap={20} Margin="15px" NoBackground>
            <DGListViewItem title='余额充值' rIcon={<ArrowRight/>} Background/>
            <DGListViewItem title='余额提现' rIcon={<ArrowRight/>} Background/>
            <DGListViewItem title='钱包账单' rIcon={<ArrowRight/>} Background/>
        </DGListView>
        {/*/!* 钱包服务 *!/*/}
        {/*<DGListView title="其他服务" gap={20} Margin="15px" NoBackground>*/}
        {/*    <DGListViewItem title='账户转账' rIcon={<ArrowRight/>} Background/>*/}
        {/*</DGListView>*/}
        {/* 网站底栏 */}
        <DGFooterView/>
    </DGFadeView>);
}

export default DGMoney;